<template>
<div class="count">
<h2>当前求和为:{{countStore.sum}}</h2>
  <select v-model.number="n"><!--用户选中n-->
    <option value="1">1</option><!--value前加:也能转换为number响应式-->
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button @click="add">加</button>
  <button @click="minus">减</button>
</div>
</template>

<script setup lang="ts" name="Count">
import {reactive, ref} from "vue";
import  {userCountStore} from "@/store/count";
//reactive中定义的ref响应式变量不用加.value拆包
// let a=reactive({
//   a:1,
//   b:2,
//   c:ref(8)
// })
// let x=6
// console.log(a.a)
// console.log(a.b)
// console.log(a.c)//不要value

// export default {
//   name: "Count"
// }
// let sum=ref(1)
let n=ref(1)//用户选中数字
//初始化reactive 对象 countStore
const countStore=userCountStore()

console.log('@@@',countStore.sum)

//method
function add(){

}
function minus(){

}
</script>

<style scoped>
.count{
  background-color: deepskyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
select,button{
  margin: 0 5px;
  height: 25px;
}
</style>